<template>
    <view>
        <z-paging ref="paging" v-model="list" @query="queryList">
            <template #top>
                <u-navbar backText="" title="收藏夹" title-bold>
                    <template #right>
                        <view class="u-padding-right-20" @click="editFab">
                            <text class="o-font-color-error" v-if="list.length != 0">{{ editText }}</text>
                        </view>
                    </template>
                </u-navbar>
            </template>
            <view class="fab-list">
                <view v-for="(item, index) in list" :key="index" class="u-flex items" @click="gotoDetails(item.goodsReleaseId)">
                    <view class="check" :class="item.checked ? 'icon icon-checked' : 'icon icon-check'" v-show="showActionBar" @click.stop="itemChecked(item)"></view>
                    <img-cache :src="`${global.productImageUrl}${item.goodsReleaseVo.picId}/1`" width="130" height="130" border-radius="10" class="u-flex-shrink"></img-cache>
                    <view class="u-line-2 name">
                        <view class="releaseName">{{ item.goodsReleaseVo.releaseName }}</view>
                        <view class="price"> ￥{{ Number(item.goodsReleaseVo.userPrice).toFixed(2) }} </view>
                    </view>
                </view>
            </view>
            <template #bottom>
                <view class="action-bar" v-if="showActionBar">
                    <view class="u-margin-bottom-20 u-flex u-row-between">
                        <u-checkbox v-model="chooseAll" label-size="24" @change="checkboxChange" active-color="#FC4F75">全选</u-checkbox>
                        <view>
                            <u-button type="p" class="btn-del" @click="deleteItem">删除</u-button>
                        </view>
                    </view>
                </view>
            </template>
        </z-paging>
        <!-- <holder height="120rpx" /> -->
        <u-modal v-model="showModal" content="确认删除这些项么?" title="" @confirm="confirmDel" show-cancel-button></u-modal>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'
import global from '@/config'

const list = ref<Array<any>>([])
const showActionBar = ref(false)
const editText = ref('编辑')
const chooseAll = ref(false)
const showModal = ref(false)
const query = ref({})
const paging = ref<any>(null)

const userStore = useUserStore()
function editFab() {
    showActionBar.value = !showActionBar.value
    if (showActionBar.value) {
        editText.value = '取消'
    } else {
        editText.value = '编辑'
    }
}

function queryList() {
    let para = { merchantId: userStore.userInfo.merchantId }
    uni.$u.$api.GoodsApi.queryFavoriteAll(para).then((res: any) => {
        paging.value.complete(res)
    }).catch(()=>{
        paging.value.complete(false)
    })
}
/** 跳转到商品详情 */
function gotoDetails(id: number | string) {
    uni.$u.$MRouter.details.to({ id })
}

function itemChecked(item: any) {
    item.checked = !item.checked
    chooseAll.value = !list.value.some(m => !m.checked)
    // this.$forceUpdate()
}

function checkboxChange() {
    list.value.map(m => (m.checked = !chooseAll.value))
}

function deleteItem() {
    let arr: Array<string> = []
    list.value
        .filter(m => m.checked)
        .forEach(item => {
            arr.push(item.id.toString())
        })
    if (arr.length == 0) {
        uni.$u.toast('没有选择任何项')
        return
    }
    query.value = { ids: arr.join(',') }
    showModal.value = true
}

function confirmDel() {
    uni.$u.$api.GoodsApi.removeFavorites(query.value).then(() => {
        paging.value?.reload()
    })
}
</script>

<style scoped lang="scss">
.fab-list {
    padding: 20rpx 30rpx;
    .icon-checked {
        color: #fc4f75;
    }
    .check {
        width: 100rpx;
        height: 110rpx;
        font-size: 40rpx;
        line-height: 110rpx;
    }

    .items {
        padding: 20rpx 30rpx;
        background-color: $uni-bg-color;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
    }

    .name {
        margin-left: 20rpx;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
    }
    .releaseName {
        font-weight: 600;
        font-size: 28rpx;
        height: 80rpx;
    }

    .price {
        font-size: 28rpx;
        color: #fc4f75;
    }
}

.action-bar {
    background-color: $uni-bg-color;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20rpx 30rpx;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);

    .btn-del {
        width: 220rpx;
    }
}
</style>
